<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>02计算器1</title>
</head>

<body>
    <input type="text" id="i1" placeholder="请输入数字num1"><br>
    <input type="text" id="i2" placeholder="请输入数字num2"> <br>
    <button onclick="colc('+')">加</button>
    <button onclick="colc('-')">减</button>
    <button onclick="colc('*')">乘</button>
    <button onclick="colc('/')">除</button><br>
    <h4>运算结果: <span></span> </h4>
    <script>
        function colc(o) {
            let n1 = document.getElementById('i1').value;
            let n2 = document.getElementById('i2').value;
            n1 = parseInt(n1);
            n2 = parseInt(n2);

            if (isNaN(n1) || isNaN(n2)) {
                alert('请输入数字！');
            }
            //通过选择器找到对应的HTML元素
            let spanE = document.querySelector('span');
            console.log(spanE);
            switch (o) {
                case '+':
                    //通过innerHTML控制标签显示的文本内容
                    spanE.innerHTML = n1 + n2; break;
                case '-':
                    spanE.innerHTML = n1 - n2; break;
                case '*':
                    spanE.innerHTML = n1 * n2; break;
                case '/':
                    if (n2 != 0) {
                        spanE.innerHTML = n1 / n2;
                    } else {
                        alert('除数不能为0！');
                    }

            }
        }
    </script>
</body>

</html>